<template>
<el-col :span="11">
        <div class="bg-purple">
          <div ref="chart" style="height: 450px" class="w"></div>
        </div>
      </el-col>
</template>

<script>
import * as echarts from "echarts";
export default {
mounted(){
    var app = {};

    var myChart = echarts.init(this.$refs.chart);
    var option;
    const posList = [
      "left",
      "right",
      "top",
      "bottom",
      "inside",
      "insideTop",
      "insideLeft",
      "insideRight",
      "insideBottom",
      "insideTopLeft",
      "insideTopRight",
      "insideBottomLeft",
      "insideBottomRight",
    ];
    app.configParameters = {
      rotate: {
        min: -90,
        max: 90,
      },
      align: {
        options: {
          left: "left",
          center: "center",
          right: "right",
        },
      },
      verticalAlign: {
        options: {
          top: "top",
          middle: "middle",
          bottom: "bottom",
        },
      },
      position: {
        options: posList.reduce(function (map, pos) {
          map[pos] = pos;
          return map;
        }, {}),
      },
      distance: {
        min: 0,
        max: 100,
      },
    };
    app.config = {
      rotate: 90,
      align: "left",
      verticalAlign: "middle",
      position: "insideBottom",
      distance: 15,
      onChange: function () {
        const labelOption = {
          rotate: app.config.rotate,
          align: app.config.align,
          verticalAlign: app.config.verticalAlign,
          position: app.config.position,
          distance: app.config.distance,
        };
        myChart.setOption({
          series: [
            {
              label: labelOption,
            },
            {
              label: labelOption,
            },
            {
              label: labelOption,
            },
          ],
        });
      },
    };
    const labelOption = {
      position: app.config.position,
      distance: app.config.distance,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      rotate: app.config.rotate,
      formatter: "{c}  {name|{a}}",
      fontSize: 16,
      rich: {
        name: {},
      },
    };
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      title: {
        text: "价格分布 单位:w元",
      },
      legend: {
        data: ["公寓", "住宅", "商铺"],
      },
      xAxis: [
        {
          type: "category",
          axisTick: { show: false },
          data: ["2018", "2019", "2020", "2021", "2022"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "公寓",
          type: "bar",
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390],
        },
        {
          name: "住宅",
          type: "bar",
          label: labelOption,
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290],
        },
        {
          name: "商铺",
          type: "bar",
          label: labelOption,
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190],
        },
      ],
    };
    option && myChart.setOption(option);
}
}
</script>

<style scoped>

.w {
  width: 100%;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
  margin-top: 20px;
  border-radius: 5px;
}
</style>